<template>
    <el-pagination background @current-change="handleCurrentChange" @size-change="handleSizeChange" :current-page="page"
        :page-size="size" layout="total, sizes,prev, pager, next, jumper" :page-sizes="pageSizes" :total="total">
    </el-pagination>
</template>
<script>
import { Array } from 'core-js'

export default {
    components: {},
    props: {
        page: {
            type: Number,
            default: 1
        },
        size: {
            type: Number,
            default: 10
        },
        total: {
            type: Number,
            default: 10
        },
        pageSizes: {
            type: Array,
            default: () => {
                return [10, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 1000, 1500, 2000]
            }

        }
    },
    data() {
        return {}
    },
    watch: {
        total(v) {
            if (this.page > Math.ceil(v / this.size)) {
                let page = this.page <= 1 ? 1 : this.page - 1
                this.handleCurrentChange(Math.ceil(page))
            }
        }
    },

    methods: {
        handleCurrentChange(page) {
            this.$emit('current-change', page)
        },
        handleSizeChange(size) {
            this.$emit('size-Change', size)
        }
    },

    mounted() { },

};
</script>